<template>
	<view class="details">
		<view class="" v-for="(item,index) in list" :key="index">
			<view class="details-header">
				<view class="top-box">
					<view class="header-title">
						<text>{{title}}</text>
					</view>
					<view class="header-xinzi">
						<text class="t">{{xinzi}}￥/天</text>
					</view>
				</view>
				<view class="bottom-box">
					<view class="box-title">
						<view class="header-img">
							<image :src="img" mode=""></image>
						</view>
						<view class="header-username">
							<text>{{qyname}}</text>
						</view>
					</view>
					<view class="box-bt" @tap="shenqing(qyname,title,id,img)" v-if="userrole=='student'">
						<text>申请</text>
					</view>

				</view>
			</view>
			<view class="details-content">
				<view class="content-main">
					<view class="main-title">岗位描述</view>
					<view class="main-zhize">
						<view class="til">
							<text class="til-a">岗位职责</text>
						</view>
						<rich-text :nodes="item.requirement"></rich-text>
					</view>
					<view class="main-yaoqiu">
						<view class="til">
							<text class="til-a">应聘要求</text>
						</view>
						<rich-text :nodes="item.responsibility"></rich-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				id: '',
				title: '',
				xinzi: '',
				qyname: '',
				img: '',
				userrole:'',
				msglist: [],
				list: [{}],
				// list: [{
				// 	id: 1,
				// 	title: '图书管理员',
				// 	img: "/static/img/1.svg",
				// 	qyname: "学院",
				// 	xinzi: "100",
				// 	zhize: '全面负责学校图书馆的日常管理及运营工作<br>负责图书馆日常流通工作<br>积极配合学校教学工作',
				// 	yaoqiu: '学习能力强，思维发散，善于沟通<br>热爱图书馆行业，力求培养自己精通业务和文献信息服务技能'
				// }]
			}
		},
		components: {

		},
		methods: {
			shenqing(name,title,listid,img){
				const xsimg = uni.getStorageSync('userlist')[0].img
				const xsname = uni.getStorageSync('userlist')[0].name
				const phone = uni.getStorageSync('userlist')[0].phone
				const sex = uni.getStorageSync('userlist')[0].sex
				const description = uni.getStorageSync('userjianli')[0].description
				const skill = uni.getStorageSync('userjianli')[0].skill
				console.log(skill);
				axios.post('/api/shenqing?xsimg='+xsimg+'&xsname='+xsname+'&qyname='+name
				+'&phone='+phone+'&sex='+sex+'&description='+description+'&skill='+skill
				+'&title='+title+'&listid='+listid+'&qyimg='+img).then(res =>{
					uni.showToast({
						title:'申请成功'
					})
				})
			}
		},
		onLoad: function(data) {
			this.id = data.id
			this.title = data.title
			// console.log(data);
			this.xinzi = data.xinzi
			this.qyname = data.qyname
			this.img = data.img

			if(uni.getStorageSync('userlist')){
				this.userrole = uni.getStorageSync('userlist')[0].role
			}
		},
		mounted() {
			
			axios.get('/api/details?id=' + this.id).then(res => {
				// console.log(res.data);
				this.list = res.data

			})
		}
		
	}
</script>

<style scoped lang="scss">
	.details {
		width: 100%;
		height: 100%;
		background-color: rgba(204, 204, 204, 0.2);
	}

	.details-header {
		width: 100%;
		height: 250rpx;
		display: flex;
		flex-direction: column;
		padding: 0 8%;
		background-color: bisque;
		position: sticky;
		top: 88rpx;
		z-index: 999;

		.top-box {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			line-height: 100rpx;
			border-bottom: 1px solid #CCCCCC;
			font-size: 44rpx;
			color: #99CCCC;

			.t {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.bottom-box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.box-title {
				display: flex;
				align-items: center;
			}

			.header-img {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-username {
				margin-left: 20rpx;
			}

			.box-bt {
				width: 160rpx;
				height: 60rpx;
				color: #666666;
				font-weight: bold;
				border-radius: 20px;
				margin-right: 40rpx;
				text-align: center;
				line-height: 60rpx;
				background-color: #FF6666;
			}
		}
	}

	.details-content {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
		background-color: white;
		border-bottom: 1px solid #CCCCCC;

		.content-main {
			width: 100%;
			padding: 10rpx 4%;

			.main-title {
				width: 100%;
				font-size: 44rpx;
				border-bottom: 1px solid #CCCCCC;
				padding: 20rpx 0;
			}

			.main-zhize {}

			.til {
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 20rpx 0;

				.til-a {
					border-bottom: 1px solid #99CCCC;
					color: #99CCCC;
					font-weight: bold;

				}
			}
		}
	}

	uni-rich-text {
		line-height: 50rpx;
		font-size: 26rpx;
	}
</style>
